<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <link rel="stylesheet" type="text/css" href="js/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="js/easyui/themes/icon.css">
    <script type="text/javascript" src="js/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script>
    <style type="text/css">
        .myicon-login{
            background:url('img/login.png') no-repeat center center;
        }
    </style>
</head>
<body>
    <div style="width: 500px;margin: 100px auto;">
        <div id="p" class="easyui-panel" title="登录"
             style="width:500px;height:225px;padding:10px;background:#fafafa;"
             data-options="iconCls:'myicon-login'">
            <form action="">
                <table style="margin-left: 40px" width="410px">
                    <tr style="text-align: center;font-size: 20px;font-weight: bold;">
                        <td colspan="2">淘乐墙管理</td>
                    </tr>
                    <tr style="height: 40px;">
                        <td align="right">登录名</td>
                        <td><input style="margin-left: 10px" onblur="checkname()" type="text" id="username" name="username"/></td>
                        <td align="left"><span style="color: red">*</span><span id="erruser" style="height: 20px"></span></td>
                    </tr>
                    <tr  style="height: 40px;" >
                        <td align="right">密码</td>
                        <td width="200"><input  style="margin-left: 10px" onblur="checkpassword()" id="password" type="password" name="password"/></td>
                        <td width="150" align="left"><span style="color: red">*</span><span id="errpassword" style="height: 20px"></span></td>
                    </tr>
                    <tr align="center">
                        <td style="padding-top: 10px;" colspan="2">
                            <a onclick="checkall()" style="margin-left: 70px;" id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">登录</a>
                            <a style="margin-left: 50px;" id="" href="register.html" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">注册</a>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
    <div></div>
    <script>
        function checkname(){  //检查用户名
            var username=document.getElementById("username").value;    //获取用户名文本框的值
            var erruser=document.getElementById("erruser");         //定义用户名文本框的提示
            if(username == "") {
                erruser.innerHTML="用户名不能为空!";
                erruser.style.color="red";
                return false;
            }else if(username.length > 20 || username.length < 4){
                erruser.innerHTML="用户名规定在4-20位字符";
                erruser.style.color="red";
                return false;
            }else {
                erruser.innerHTML="√";
                erruser.style.color="green";
                return username;
            }
            // for(var i=0;i<username.length;i++) {
            //     var han = /^[\u4e00-\u9fa5]+$/;
            //     var text=username.charAt(i);
            //     if(!han.test(text)) {
            //         erruser.innerHTML="用户名只能设置为中文字符";
            //         erruser.style.color="red";
            //         break;
            //     }
            // }
            // if(i >= username.length) {
            //     erruser.innerHTML="√";
            //     erruser.style.color="green";
            //     return username;
            // }
        }
        function checkpassword() {    //检查密码
            var password=document.getElementById("password").value;   //获取密码文本框的值
            var errpassword=document.getElementById("errpassword");      //获取密码文本框的提示
            if(password == "") {
                errpassword.innerHTML="密码不能为空";
                errpassword.style.color="red";
                return false;
            }else if(password.length < 6){
                errpassword.innerHTML="密码至少为6位";
                errpassword.style.color="red";
                return false;
            }else{
                errpassword.innerHTML="√";
                return password;
            }
        }

        function checkall() { //检查所有
            if(checkname()&&checkpassword()){
                //和后台验证用户名和密码
                $.ajax({
                    url:'http://localhost:8080/user/login',
                    type:'post',
                    data:{
                        "name":document.getElementById("username").value,
                        "password":document.getElementById("password").value
                    },
                    // data:JSON.stringify(userBase),//转化成json字符串格式，引号的区别，往user对象填充属性和属性值 格式：user = {"username":"哈哈青年","email":"123456@qq.com"}
                    success:function (data) {
                        if(data == 200){
                            //1.登录，那么需要跳转到首页界面
                            setTimeout(function () {
                                if (confirm("三秒后跳转到登陆界面!")){
                                    //跳转主页面并传递参数用户名
                                    window.location.href = "index.html?name="+encodeURI($('#username').val());
                                }
                                window.location.href = "index.html?name="+$('#username').val();
                            },3000);
                        }else {
                            //2.提示失败的信息
                            alert("用户名密码错误");
                        }
                    }
                });
            }else {
                document.getElementById("username").style.border="2px solid red";
                document.getElementById("password").style.border="2px solid red";
                return false;
            }
        }
    </script>
</body>
</html>